/**
 * Created by ren on 05/04/2017.
 */
'use strict';
import React, {Component} from 'react';
import {Platform, StatusBar, View, Image} from 'react-native';
import {
  Text,
  ListItem,
  Body,
  List,
  Right,
  Button,
  Container,
  Content,
  Header,
  Title,
  Left,
  Icon,
  Footer,
  FooterTab
} from 'native-base'
import {getSize} from '../utils/response'
import * as api from '../utils/api'
import * as netservice from '../utils/netservice'
import PageUtil from '../utils/PageUtil';
import Loaddingpage from '../components/Loaddingpage'
import ActionSheet from 'react-native-actionsheet'

const CANCEL_INDEX = 3
const DESTRUCTIVE_INDEX = 0
const options = ['没货了', '不在配送范围之内', '其他', '取消']
const title = '取消原因'
export default class OrderDetail extends Component {
  constructor(props) {
    super(props);
    this.PageUtil = new PageUtil();
    // 初始状态
    this.state = {
      orderInfo: '',
      orderGoods: '',
      loaded: false,
      btnView: [],
      btnStatus: false
    };
    this.handlePress = this.handlePress.bind(this)
    this.showActionSheet = this.showActionSheet.bind(this)
  }

  /**
   * 1:接单，2：待配送订单
   */
  btnSwitch() {
    let btnView = ''
    switch (this.props.status) {
      case 1:
        btnView = <Footer>
          <FooterTab>
            <Button block disabled={this.state.btnStatus}
                    onPress={() => this.getOrder()}
                    style={styles.btn}>
              <Text style={{color:'white',fontSize:getSize(15)}}>接单</Text>
            </Button>
          </FooterTab>
        </Footer>
        break
      case 2:
        btnView = <Footer>
          <FooterTab>
            <Button block disabled={this.state.btnStatus}
                    onPress={()=>this.delOrder()}
                    style={styles.btn1}>
              <Text
                style={{color:'white',fontSize:getSize(15)}}>取消接单</Text>
            </Button><Button block disabled={this.state.btnStatus}
                             onPress={() => this.deliverGoods()}
                             style={styles.btn}>
            <Text style={{color:'white',fontSize:getSize(15)}}>配送</Text>
          </Button></FooterTab></Footer>
        break
      default:
        btnView = []
    }
    this.setState({
      btnView: btnView
    })
  }

  /**
   * 接单
   */
  getOrder() {
    if (this.state.btnStatus) {
      return
    }
    this.setState({
      btnStatus: true
    })
    netservice.post(api.getOrder, {
      orderId: this.props.orderId
    }).then(reponse => {
      this.props.func()
      this.PageUtil.pop()
    }).catch()
  }

  /**
   * 配送
   * @param orderId
   */
  deliverGoods() {
    if (this.state.btnStatus) {
      return
    }
    this.setState({
      btnStatus: true
    })
    netservice.post(api.deliverGoods, {
      orderId: this.props.orderId
    }).then(reponse => {
      this.props.func()
      this.PageUtil.pop()
    })
  }

  /**
   * 取消订单
   * @param myOrderId
   */
  delOrder(orderId, myOrderId) {
    if (this.state.btnStatus) {
      return
    }
    this.setState({
      btnStatus: true
    })
    this.setState({
      myOrderId: this.props.myOrderId,
      orderId: this.props.orderId
    })
    this.showActionSheet()
  }

  showActionSheet() {
    this.ActionSheet.show()
  }

  handlePress(i) {
    if (i !== 3) {
      netservice.remove(api.deleteMyOrder, {
        myOrderId: this.state.myOrderId,
        orderId: this.state.orderId,
        logRemark: options[i]
      }).then(reponse => {
        this.props.func()
        this.PageUtil.pop()
      })
    }
    this.setState({
      selected: i
    })
  }

  renderLoadingView() {
    return (
      <View style={{flex:1}}>
        <Loaddingpage/>
      </View>
    );
  }

  getOrderDetail() {
    netservice.get(api.orderDetail, {
      orderId: this.props.orderId
    }).then(reponse => {
      this.setState({
        orderInfo: reponse.orderInfo,
        orderGoods: reponse.orderGoods,
        loaded: true
      })
    })
  }

  componentDidMount() {
    setTimeout(() => {
      this.getOrderDetail()
      this.btnSwitch()
    }, 300)
  }

  render() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }
    const {orderInfo, orderGoods} =this.state
    return (
      <Container
        style={{flex:1,backgroundColor:'#F4F4F4'}}>
        <Header iosBarStyle="light-content" backgroundColor="#16BD42"
                style={{backgroundColor:'#16BD42',height:Platform.OS==='ios'?getSize(64):getSize(50),borderBottomWidth:0,marginBottom:getSize(7)}}>
          <StatusBar
            backgroundColor={'#303135'}
          />
          <Left style={{flex:1}}>
            <Button transparent onPress={this.PageUtil.pop}>
              <Icon name='arrow-back' style={{fontSize:getSize(24),color:'white'}}/>
            </Button>
          </Left>
          <Body style={{alignItems:'center'}}>
          <Title style={{color:'white',fontSize:getSize(19)}}>订单详情</Title>
          </Body>
          <Right style={{flex:1}}/>
        </Header>
        <Content>
          <View style={styles.listItem}>
            <View
              style={styles.listHeader}>
              <Text
                style={{flex:1,fontSize:getSize(13),color:'#767676',marginLeft:0,}}>{(orderInfo.createTime).substring(0, 11)}</Text>
              <Text
                style={{color:'#767676',alignItems:'flex-end',fontSize:getSize(13)}}>订单编号:{orderInfo.orderCode}</Text>
            </View>
            <List dataArray={orderGoods}
                  renderRow={(item) =>
                            <ListItem style={{marginLeft:0,paddingRight:0}}>
              <View style={styles.imgWrap}><Image source={{uri:item.skuImage+'@w_200'}} style={{width:getSize(72),height:getSize(72)}}/></View>
              <Body>
              <Text style={{fontSize:getSize(12),color:'#333333'}}>{item.skuName}</Text>
              <Text style={{color:'#9A9A9A',fontSize:getSize(12),marginTop:getSize(4)}}>{item.skuSpec}</Text>
              <View style={{flexDirection:'row',marginTop:getSize(10)}}>
              <Text style={{color:'#AFAFAF',fontSize:getSize(12)}}>￥{item.skuSalePrice}</Text>
              <Right>
                 <Text style={{color:'#AFAFAF',fontSize:getSize(12)}}>数量:{item.skuNum}</Text>
              </Right>
              </View>
              </Body>
            </ListItem>}/>
            <View
              style={{alignItems:'flex-end',marginTop:getSize(12.5)}}>
              <Text style={{color:'#333333',fontSize:getSize(12)}}>共计：{orderGoods.length}件</Text>
              <Text
                style={{color:'#EA101D',fontSize:getSize(26),marginTop:getSize(4),fontWeight:'bold'}}>{orderInfo.netPay}</Text>
            </View>
          </View>

          <View style={{backgroundColor:'white'}}>
            <ListItem style={styles.list}>
              <Text style={{fontSize:getSize(13),color:'#333333'}}>收货人：{orderInfo.consignee}</Text>
              <Right>
                <Text style={{fontSize:getSize(13),color:'#333333'}}>联系电话：{orderInfo.mobile}</Text>
              </Right>
            </ListItem>
            <ListItem style={styles.list}>
              <Text style={{fontSize:getSize(13),color:'#333333'}}>店铺：{orderInfo.coName}</Text>
            </ListItem>
            <ListItem style={styles.endList}>
              <Text style={{fontSize:getSize(13),color:'#333333'}}>收货地址：{orderInfo.deliveryAddress}</Text>
            </ListItem>
          </View>
          <ActionSheet
            ref={o => this.ActionSheet = o}
            title={title}
            options={options}
            cancelButtonIndex={CANCEL_INDEX}
            destructiveButtonIndex={DESTRUCTIVE_INDEX}
            onPress={this.handlePress}
          />
        </Content>
        {this.state.btnView}
      </Container>
    )
  }
}
const styles = {
  listItem: {
    backgroundColor: 'white',
    marginLeft: 0,
    marginBottom: 9,
    paddingTop: 0,
    paddingBottom: 0,
    paddingLeft: 10,
    paddingRight: 10
  },
  listHeader: {
    flexDirection: 'row',
    borderBottomWidth: 1 / 3,
    height: getSize(22.5),
    alignItems: 'center',
    borderBottomColor: '#95989A',
    marginBottom: getSize(6.5)
  },
  imgWrap: {
    borderWidth: 1,
    borderColor: '#C6C6C6',
    width: getSize(80),
    height: getSize(80),
    justifyContent: 'center',
    alignItems: 'center'
  },
  btn: {
    borderRadius: 0,
    backgroundColor: '#16BD42'
  },
  btn1: {
    borderRadius: 0,
    backgroundColor: '#b8bdbd'
  },
  list: {
    marginRight: getSize(10),
    marginLeft: getSize(10),
    paddingLeft: 0,
    paddingRight: 0
  },
  endList: {
    marginRight: getSize(10),
    marginLeft: getSize(10),
    paddingLeft: 0,
    paddingRight: 0,
    borderBottomWidth: 0
  }
};